<template>
	<view class="wanl-order-list">
		<view class="navbar">
			<view class="nav-item text-df" v-for="(item, index) in navList" :key="index" :class="{ current: tabCurrentIndex === index }" @tap="tabClick(index)"> {{ item.text }} </view>
		</view>
		<view style="height: calc(100% - 60rpx)"  >
			<view class="tab-content" v-if="list.length">
				<view v-for="(coupon, index) in list" :key="index" :class="{
					'gray': coupon.state == '3',
					'orange': coupon.state == '2'
					}" class="item-counpon margin-bottom-bj radius-bock">
					<view class="up">
						<view class="item-left">
							<view class="dot dot1"></view>
							<view class="dot dot2"></view>
							<view class="dot dot3"></view>
							<view class="dot dot4"></view>
							<view class="dot dot5"></view>
							<view class="dot dot6"></view>
							
							<block v-if="coupon.type == 'reduction' || (coupon.type == 'vip' && coupon.usertype == 'reduction')">
								<view class="colour">
									<text class="text-price"></text>
									<text class="prices text-red">{{ Number(coupon.price) }}</text>
									<text> 起</text>
								</view>
								<view class="cu-tag wanl-gray-dark radius text-sm bg-white">
									每满{{ Number(coupon.limit) }}可用
								</view>
							</block>
							<block v-if="coupon.type == 'discount' || (coupon.type == 'vip' && coupon.usertype == 'discount')">
								<view class="colour">
									<text class="prices text-red">{{ Number(coupon.discount) }}</text>
									<text class="discount text-red">折</text>
								</view>
								<view class="cu-tag wanl-gray-dark radius text-sm bg-white">
									满{{ Number(coupon.limit) }}打{{ Number(coupon.discount) }}折
								</view>
							</block>
							<block v-if="coupon.type == 'shipping'">
								<view class="colour">
									<text class="prices text-red">包邮</text>
								</view>
								<view class="cu-tag wanl-gray-dark radius text-sm bg-white">
									满{{ Number(coupon.limit) }}元包邮
								</view>
							</block>
						</view>
						<view class="item-right-coupon padding-bj" :class="coupon.open ? 'item-right-coupon-open' : ''">
							<view class="left">
								<view class="title">
									<view class="cu-tag sm radius margin-right-xs tagstyle " style="color: #ffffff;">
										{{ coupon.type_text }}
									</view>
									<view class="text-cut text-lg">{{ coupon.name }}</view>
								</view>
								<view class="wanl-gray">
									<text class="startdate">{{ coupon.startdate && coupon.startdate.replaceAll('-', '.') }}</text>
									<text>-</text>
									<text class="startdate">{{ coupon.enddate && coupon.enddate.replaceAll('-', '.') }}</text>
								</view>
								<view class="description" @tap="changeDesc(index)">
									<text>使用说明</text>
									<image src="../../../static/images/default/shrink.png" class="image shrink" v-if="!coupon.open"></image>
									<image src="../../../static/images/default/expand.png" class="image coupon-sign" v-if="coupon.open"></image>
								</view>
							</view>
							<view class="content text-min">
								<!-- <image :src="$wanlshop.appstc('/coupon/img_couponcentre_received_3x.png')" class="coupon-sign" v-if="coupon.state"></image> -->
								
								<!-- <image :src="$wanlshop.appstc('/static/images/default/shopx.png')" class="coupon-sign" v-if="coupon.state == 2"></image>
								<image :src="$wanlshop.appstc('/static/images/default/shops.png')" class="coupon-sign" v-if="coupon.state == 3"></image> -->
								<image src="../../../static/images/default/shopx.png" mode="widthFix" class="image shrink" v-if="coupon.state == '2'"></image>
								<image src="../../../static/images/default/shops.png" mode="widthFix" class="image coupon-sign" v-if="coupon.state == '3'"></image>
							</view>
						</view>
					</view>
					
					<view class="down" v-if="coupon.open">
						<view class="desc">{{ coupon.coupon.content || coupon.rangetype_text }}</view>
					</view>
				</view>
			


			</view>

			<view v-else>
				<!-- <text>123</text> -->
				<view class="no"
					style=" margin: 6.93vw 0; display: flex;flex-direction: column;align-items: center;padding: 100rpx 0;">
					<image style="width: 36.26vw;height: 25.33vw; " src="../../../static/images/user/wu.png" mode="">
					</image>
					<text style="color: #7B7B7B;margin-top: 20rpx;">暂无</text>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
export default {
	data() {
		return {
			can: true,
			likeData: [],
			tabCurrentIndex: 0,
			status:"",
			list: [],
			navList: [{
				type: '2',
				text: '已使用',
				// loadingType: 'more',
				// current_page: 1,
				// cardList: []
			},
			{
				type: '3',
				text: '已失效',
				// loadingType: 'more',
				// current_page: 1,
				// cardList: []
			}
			// {
			// 	type: 'shipping',
			// 	text: '包邮券',
			// 	loadingType: 'more',
			// 	current_page: 1,
			// 	cardList: []
			// }
			],
			contentText: {
				contentdown: ' ',
				contentrefresh: '正在加载...',
				contentnomore: ''
			}
		};
	},
	onLoad(options) {
		// 优惠券列表
		this.loadData(2);

		// dolike
		this.loadlikeData();
		// console.log(options)
	},
	methods: {
		historyQ () {
			console.log('historyQ')
			uni.reLaunch({
				url: "/pages/user/coupon/history"
			})
		},
		// 是否展开使用说明
		async changeDesc(index) {
			this.list[index].open = !this.list[index].open;
			this.$set(this.list, index, this.list[index]);
		},
		toIndex() {
			uni.reLaunch({
				url: "/pages/index"
			})
		},
		//swiper 切换
		changeTab(e) {
			this.tabCurrentIndex = e.target.current;
			this.loadData('tabChange');
		},
		//顶部tab点击
		tabClick(index) {
			this.tabCurrentIndex = index;
			this.loadData(this.navList[index].type)
		},
		//获取订单列表
		async loadData(source) {
			//这里是将订单挂载到tab列表下
			let index = this.tabCurrentIndex;
			let navItem = this.navList[index];
			let type = navItem.type;
			console.log(source)
			
			// 获取列表
			this.$api.get({
				url: '/wanlshop/coupon/getMyList',
				data: {
					// type: "",
					// page: navItem.current_page\

					state: source
				},
				success: res => {
					this.list = res.data
					
					console.log(this.list.length, res.data.length)
					navItem.current_page = res.current_page; //当前页码
					if (res.last_page === res.current_page) {
						navItem.loadingType = 'noMore';
					} else {
						navItem.loadingType = 'more';
						navItem.current_page++;
					}
					// let cardList = res.data.filter(item => {
					// 	item = Object.assign(item, {
					// 		state: false
					// 	});
					// 	return item.type === type;
					// });
					// cardList.forEach(item => {
					// 	navItem.cardList.push(item);
					// 	console.log()
					// });
					//loaded新字段用于表示数据加载完毕，如果为空可以显示空白页
					this.$set(navItem, 'loaded', true);
				}
			});
		},
		// 领取优惠券
		async onReceive(key) {
			// let coupon = this.list[key];
			// this.$api.post({
			// 	url: '/wanlshop/coupon/receive',
			// 	loadingTip: '领取中',
			// 	data: {
			// 		id: coupon.id
			// 	},
			// 	success: res => {
			// 		coupon.id = res.id;
			// 		coupon.state = true;
			// 		this.$wanlshop.msg(res.msg);
			// 		this.$store.commit('statistics/dynamic', {
			// 			coupon: this.$store.state.statistics.dynamic.coupon + 1
			// 		});
			// 	}
			// });
			
			console.log('领取优惠券')
			// this.$wanlshop.on('/pages/user/coupon/history');
			uni.reLaunch({
				url: "/pages/category"
			})
		},
		onApply(id) {
			this.$wanlshop.to(`/pages/user/coupon/apply?id=${id}&state=true`);
		},
		onDetails(data) {
			// this.$wanlshop.to(`/pages/user/coupon/details?data=${JSON.stringify(data)}`);
		},
		// onLoad() {

		// 	this.loadlikeData();
		// },

		// 滚动底部加载猜你喜欢
		async loadlikeData() {
			this.$api.get({
				url: '/wanlshop/product/likes?pages=user',
				data: {
					page: this.current_page
				},
				success: res => {
					this.likeData = this.reload ? res.data : this.likeData.concat(res.data); //评论数据 追加
					this.current_page = res.current_page; //当前页码
					this.last_page = res.last_page; //总页码
					this.status = res.total == 0 ? 'noMore' : 'more';
				}
			});
		},
	}
};
</script>

<style lang="scss">
page {
	height: 100%;
	background-color: #f6efe9;
}

.ztai {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2vw 1vw;
	border-radius: 1vw;
	height: 4vw;
	font-size: 3.2vw;
	color: #FF2525;
	font-weight: normal;
	border: 0.2vw solid #FF2525;
	margin-left: 4.266vw;
}

.wanl-order-list {
	.navbar {
		margin-bottom: 20rpx;
	}
	.tab-content {
		padding: 0 20rpx;
		.head {
			background-color: #ffffff;
		}
		.wanl-coupon {
			background-color: #f6efe9;
		}
		.scroll-y {
			padding: 24rpx;
		}
		.item-counpon {
			min-height: 214rpx;
			.up {
				display: flex;
			}
			.down {
				border-radius: 0 0 12rpx 12rpx;
				
				border-top: 1rpx solid transparent;
				background: linear-gradient(white, white) padding-box,repeating-linear-gradient(-45deg, #ccc 0, #ccc 6rpx, white 0, white 10rpx);
				.desc {
					border-radius: 0 0 12rpx 12rpx;
					padding: 20rpx 24rpx;
					background-color: #f6f6f6;
					color: $font-color-light;
				}
			}
		}
		.item-left {
			background-color: #ffe8cc;
			position: relative;
			min-width: 180rpx;
			width: 180rpx;
			max-height: 190rpx;
			text-align: center;
			padding-top: 40rpx;
			.prices {
				font-size: 40rpx;
				font-weight: bold;
			}
			.dot {
				width: 16rpx;
				height: 16rpx;
				border-radius: 50%;
				background-color: #fd8c00;
				position: absolute;
				left: -8rpx;
			}
			.dot1 {
				top: 12rpx;
			}
			.dot2 {
				top: 42rpx;
			}
			.dot3 {
				top: 72rpx;
			}
			.dot4 {
				top: 102rpx;
			}
			.dot5 {
				top: 132rpx;
			}
			.dot6 {
				top: 162rpx;
			}
		}
		.item-counpon.orange {
			border-left: 20rpx solid #fd8c00;
			border-right: 20rpx solid #fd8c00;
			border-top: 16rpx solid #fd8c00;
			border-bottom: 16rpx solid #fd8c00;
			background-color: #fd8c00;
			.tagstyle {
				background-color: #fd8c00;
			}
		}
		.item-counpon.gray {
			border-left: 20rpx solid #cccccc;
			border-right: 20rpx solid #cccccc;
			border-top: 16rpx solid #cccccc;
			border-bottom: 16rpx solid #cccccc;
			background-color: #cccccc;
			.tagstyle {
				background-color: #cccccc;
			}
			.item-left {
				background-color: #eeeeee;
				.dot {
					background-color: #cccccc;
				}
			}
		}
		.bg-white {
			background-color: transparent;
			color: #141214;
		}
		.colour {
			color: #141214;
			text {
				color: #141214;
			}
			.text-red {
				color: #141214;
			}	
		}
		.item-right-coupon {
			padding: 20rpx;
			max-height: 190rpx;
			display: flex;
			flex-wrap: nowrap;
			background-color: #ffffff;
			border-radius: 0 12rpx 12rpx 0;
			width: 100%;
			.shrink,
			.coupon-sign {
				width: 140rpx;
			}
			.left {
				width: 322rpx;
				.wanl-gray {
					margin: 20rpx 0;
					color: #a3a3a3;
				}
			}
			.title {
				display: flex;
				align-items: center;
				.tagstyle {
					font-size: 22rpx;
					padding: 0rpx 12rpx;
					height: 36rpx;
				}
			}
			.content {
				display: flex;
				align-items: center;
				width: auto;
			}
			
			.description {
				display: flex;
				align-items: center;
				width: 200rpx;
				text {
					color: #2f2f2f;
					font-size: 24rpx;
					margin-right: 16rpx;
				}
				.image {
					width: 24rpx;
					height: 24rpx;
				}
			}
		}
		.item-right-coupon-open {
			border-radius: 0 12rpx 0 0;
		}
	}
}
</style>